<template>
  <el-form label-width="auto">
    <ElRow :gutter="10">
      <ElCol v-for="item in option" :span="item.span ? item.span : 24">
        <el-form-item :label="item.label">
          <template v-if="item.component.toLowerCase() === 'select'">
            <el-select
              v-model="formField[item.field]"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="i in item.componentProps.options"
                :key="i.value"
                :label="i.label"
                :value="i.value"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="item.component.toLowerCase() === 'autocomplete'">
            <ElAutocomplete
              v-model="formField[item.field]"
              :fetch-suggestions="item.componentProps.searchApi"
              placeholder="请输入"
            ></ElAutocomplete>
          </template>
          <!-- cascader -->
          <template v-else-if="item.component.toLowerCase() === 'cascader'">
            <ElCascader
              v-model="formField[item.field]"
              :options="item.componentProps.options"
              placeholder="请输入"
            ></ElCascader>
          </template>
          <!-- custom component -->
          <template v-else-if="item.component.toLowerCase() === 'custom'">
            <component
              v-model="formField[item.field]"
              :is="item.custom.component"
            ></component>
          </template>
          <template v-else>
            <el-input
              v-model="formField[item.field]"
              placeholder="请输入"
            ></el-input>
          </template>
          <!-- <component v-model="formField[item.field]" :is="getFormType(item.component)"></component> -->
        </el-form-item>
      </ElCol>
    </ElRow>
  </el-form>
</template>
<script setup>
import { defineProps, ref, watch, defineEmits } from "vue";
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElOption,
  ElRow,
  ElCol,
  ElAutocomplete,
  ElCascader,
} from "element-plus";
const emit = defineEmits(["model"]);
const props = defineProps({
  option: {
    type: Array,
    default: () => [],
  },
});
const formField = ref({});

watch(
  () => props.option,
  () => {
    console.log("props", props);
    for (let i = 0; i < props.option.length; i++) {
      formField.value[props.option[i].field] = props.option[i].value
        ? props.option[i].value
        : "";
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const form = {};
watch(
  () => formField.value,
  () => {
    console.log("formField", formField.value);
    emit("model", formField.value);
  },
  {
    deep: true,
  }
);
</script>
